<template>
	<view>
		<!-- <uni-section title="邀请" type="line"></uni-section> -->
		<view style="margin:20rpx auto;">
			<uni-search-bar 
			radius="5" 
			placeholder="用户手机号" 
			clearButton="auto" 
			cancelButton="auto" 
			@confirm="search" />
		</view>
		<view>
			<text>结果：</text>
		</view>
		<view>
			<uni-list v-if="searchUser != ''">
				<uni-list-item>
					<template v-slot:header>
						<view class="slot-box">
							<image class="slot-image" :src="searchUser.avatar" mode="widthFix"></image>
						</view>
					</template>
					<template v-slot:body>
						<text class="slot-box slot-text">{{ searchUser.nickName }}</text>
					</template>
					<template v-slot:footer>
						<button type="primary" size="mini" style="background-color: #007aff;font-size: 32rpx;" @click="addInvite()">邀请</button>
					</template>
				</uni-list-item>
			</uni-list>
			<uni-list v-if="hasClickSearch == true && searchUser == ''">
				<uni-list-item>
					<template v-slot:body>
						<text class="slot-box slot-text">他/她还不是小程序用户，点击确定按钮邀请加入我们</text>
					</template>
					<template v-slot:footer>
						<button type="primary" size="mini" open-type="share" style="background-color: #007aff;font-size: 32rpx;">邀请</button>
					</template>
				</uni-list-item>
			</uni-list>
			<view>
				<xy-dialog
				title="邀请" 
				:show.sync="showDialog"
				@cancelButton="clickCancel()"
				@confirmButton="submit()">
					<view style="padding: 0 30upx 30upx;">
						<uni-forms ref="addOrUpdateForm" labelAlign="left" :modelValue="invite">
							<uni-forms-item label="加入类型:">
								<uni-data-checkbox 
								v-model="invite.employeeStatus" 
								:localdata="employeeStatus" 
								@change="changeStatus"
								/>
							</uni-forms-item>
							<uni-forms-item label="团队:" v-if="invite.employeeStatus == 'TEAM'">
								<uni-data-picker 
								placeholder="请选择团队" 
								:localdata="team" 
								v-model="invite.teamId" />
							</uni-forms-item>
							<uni-forms-item label="项目:" v-if="invite.employeeStatus == 'PROJECT'">
								<uni-data-picker 
								placeholder="请选择项目" 
								:localdata="project" 
								v-model="invite.projectId" />
							</uni-forms-item>
						</uni-forms>
					</view>
				</xy-dialog>
			</view>
			<!-- <button type="default" size="mini" v-if="searchList != ''" @click="invite">邀请加入我的团队</button> -->
		</view>
		<uni-section title="我的邀请" type="line"></uni-section>
		<view>
			<uni-list>
				<uni-list-item v-for="item in inviteList"
				:key="item.id" 
				:title="item.invitor == user.userId ? item.acceptorName : item.invitorName"
				:note="(item.invitorName == user.nickName ? '我' : item.invitorName) + ' 邀请 ' + (item.acceptorName == user.nickName ? '我' : item.acceptorName) + ' 加入 ' + (item.employeeStatus == 'NORMAL' ? '项目管理小程序' : item.employeeStatus == 'TEAM' ? '团队： ' + item.teamName : '项目： ' + item.projectName)"
				:badgeText="item.inviteTime">
					<template v-slot:header>
						<view class="slot-box">
							<image class="slot-image" :src="item.invitor == user.userId ? item.acceptorAvatar : item.invitorAvatar" mode="widthFix"></image>
						</view>
					</template>
					<template v-slot:footer>
						<view v-if="item.inviteStatus == 'NEW'">
							<view v-if="item.acceptor == user.userId">
								<uni-tag text="同意" type="primary" @click="acceptOrRefused(item,'ACCEPTED')"></uni-tag>
								<uni-tag text="拒绝" type="primary" @click="acceptOrRefused(item,'REFUSED')"></uni-tag>
							</view>
							<view v-else>
								<uni-tag text="未处理" type="default" disabled></uni-tag>
							</view>
						</view>
						<view v-if="item.inviteStatus == 'ACCEPTED'">
							<uni-tag text="已接受" type="default" disabled></uni-tag>
						</view>
						<view v-if="item.inviteStatus == 'REFUSED'">
							<uni-tag text="已拒绝" type="default" disabled></uni-tag>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: [],
				showDialog: false,
				hasClickSearch:false,
				inviteList: [],
				searchUser: [],
				team: [],
				project: [],
				employeeStatus: [{
					text: '普通员工',
					value: 'NORMAL'
				},{
					text: '团队',
					value: 'TEAM'
				},{
					text: '项目',
					value: 'PROJECT'
				}],
				invite: {
					id: '',
					invitor: '',
					acceptor: '',
					teamId: '',
					projectId: '',
					phone: '',
					employeeStatus: 'NORMAL',
					inviteStatus: 'NEW'
				},
			}
		},
		onShareAppMessage(res) {
		    if (res.from === 'button') {// 来自页面内分享按钮
		      console.log(res.target)
		    }
		    return {
		      title: '大家都在用这款小工具管理项目，快来试试吧！！！',
		      path: '/pages/index/index'
		    }
		},
		onLoad() {
			this.user = this.$dry.get("user");
			this.getTeams();
			this.getProjects();
		},
		onShow(){
			this.getInviteList();
		},
		methods: {
			async getTeams() {
				var list = await this.$dry.getTeams(true);
				var team = [{
					text: "请选择团队",
					value: ''
				}];
				list.forEach(e => {
					team.push({
						text: e.name,
						value: e.id
					})
				})
				this.team = team;
				
			},
			getProjects() {
				var token = this.$dry.getToken();
				var data = [];
				if (token) {
					data = this.$request.run("queryProjectsByOwner",token);
					uni.request({
						url: data.url,
						method: data.method,
						header: data.header,
						data: {
							isCreator: false
						},
						success: data => {
							var projectList = data.data;
							if(projectList.length != 0) {
								var newList = [{
									text: "请选择项目",
									value: ''
								}]
								projectList.forEach(p => {
									newList.push({
										text: p.name,
										value: p.id,
									});
								});
								this.project = newList;
							}
							else{
								this.project = [];
							}
						}
					})
				}
			},
			acceptOrRefused(item,status){
				var token = this.$dry.getToken();
				if(token){
				    var data = this.$request.run("updateInvites", token);
					this.invite.acceptor = item.acceptor;
					this.invite.invitor = item.invitor;
					this.invite.employeeStatus = item.employeeStatus;
					this.invite.id = item.id;
					this.invite.projectId = item.projectId;
					this.invite.teamId = item.teamId;
					this.invite.inviteStatus = status;
					this.invite.phone = item.phone;
				    uni.request({
				    	url: data.url,
				    	method: data.method,
				    	header: data.header,
				    	data: this.invite,
				    	success: data => {
							if(data.code == 0){
								uni.showToast({
									title: "处理成功"
								})
							}
							this.getInviteList();
						}
					})
				}
			},
			search(e){
				// var that = this;
				if(e.value != ''){
					var token = this.$dry.getToken();
					if(token){
					    var data = this.$request.run("searchUserByPhone",token);
					    uni.request({
					    	url: data.url,
					    	method: data.method,
					    	header: data.header,
					    	data: {
								"mobile": e.value
							},
					    	success: data => {
								this.hasClickSearch = true;
								this.searchUser = data.data;
							}
						})
					}
				}
			},
			submit() {
				this[`showDialog`] = false;
				this.$refs['addOrUpdateForm'].validate().then(res => {
					uni.showLoading({
						title: '邀请成功'
					});
					this.invite.invitor = this.$dry.get("user").userId;
					this.invite.acceptor = this.searchUser.userId;
					this.invite.phone = this.searchUser.phone;
					this.handleInvite();
					setTimeout(() => {
						uni.hideLoading();
						this.getInviteList();
					}, 2000)
				}).catch(err => {
					console.log(err);
					uni.showToast({
						title: "操作失败"
					})
				})
			},
			addInvite() {
				this[`showDialog`] = true;
			},
			handleInvite(){
				var token = this.$dry.getToken();
				if(token){
					var data = {};
					if(this.invite.inviteStatus == 'NEW') {
						data = this.$request.run("addInvite", token);
					} else {
						data = this.$request.run("updateInvite", token);
					}
					uni.request({
						url: data.url,
						method: data.method,
						header: data.header,
						data: this.invite,
						success: data => {
							if(data.statusCode === 200) {
								if(data.data.code === 0) {
									if(this.invite.inviteStatus == 'NEW') {
										uni.showToast({
											title: "发送邀请成功！"
										})
									} else {
										uni.showToast({
											title: "操作成功！"
										})
									}
								}
								else {
									uni.showToast({
										title: data.data.msg
									})
								}
							}
							
						}
					})
				}
			},
			getInviteList(){
				var token = this.$dry.getToken();
				if(token){
					var data = this.$request.run("listInvites", token);
					uni.request({
						url: data.url,
						method: data.method,
						header: data.header,
						data: {},
						success: data => {
							this.inviteList = data.data;
						}
					})
				}
			},
			clickCancel() {
				this[`showDialog`] = false;
			},
			changeStatus() {
				if(this.invite.employeeStatus == 'TEAM') {
					this.invite.projectId = '';
				}
				if (this.invite.employeeStatus == 'PROJECT') {
					this.invite.teamId = '';
				}
				if(this.invite.employeeStatus == 'NORMAL') {
					this.invite.projectId = '';
					this.invite.teamId = '';
				}
			}
		}
	}
</script>

<style>
	.slot-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}
	.slot-image {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		margin-right: 10px;
		width: 30px;
		height: 30px;
	}
	
	.slot-text {
		flex: 1;
		font-size: 14px;
		margin-right: 10px;
	}
	#submit-button {
		width: 50%;
		height: 100rpx;
		margin-bottom: -120rpx;
		margin-right: -30rpx;
		border: none;
		outline: none;
		z-index: 100;
	}
</style>
